﻿a, a:hover, a:visited {
    text-decoration:none;
    color:#fff;
}
* {
    margin:0;
    padding:0;
}
body {
    background:transparent url("/Images/ImgPage/bkg-win8.jpg") repeat 0 0; 
    overflow:hidden;
    color:snow;
    letter-spacing:0.03em;
    white-space:nowrap;
}
li {
    list-style:none;
}
.metro-body {
    height:475px;
    position:absolute;
    margin-left:50px;
    top:21%;
    padding-top:27px;
    padding-bottom:5px;
}
.scroll-enable {
    overflow-x:hidden;
    white-space:normal;
}
.Mess-No-Item {
    font-size:25px;
    white-space:normal;
}
/*-------------------------------------------Notification---------------------------------------------*/
.toast-notification {
    width:404px;
    height:94px;
    background-color:#67b6ea;
    position:fixed;
    z-index:9999;
    bottom:80%;
    right:8px;
    border:2px solid black;
}
.toast-notification:hover {
    box-shadow:0 0 2px 2px rgba(255, 255, 255, 0.34);
}
.left-toast {
    width:90px;
    height:90px;
    float:left;
    background:url("/Images/ImgPage/2c_info.png");
    background-size:contain;
}
.message-toast {
    width:280px;
    float:left;
    margin-left:10px;
    font-size:17px;
    white-space:normal;
    overflow:hidden;
    margin-top:15px;
}
.close-toast {
    background:url("/Images/ImgPage/close_button.png");
    background-size:contain;
    width:25px;
    height:25px;
    position:absolute;
    right:0;
    display:block;
}
.close-toast:hover {
    cursor:pointer;
}
/*-------------------------------------------End notification---------------------------------------------*/
/*------------------------------------ Style tiles -------------------------------------------*/
.group-tiles {
    margin-right:52px;
    display:inline-block;
}
.group-name {
    position:absolute;
    margin-top:-29px;
    font-size:23px;
    margin-left:5px;
}
.column {
/*    float:left;*/
    display:inline-block;
    max-width:316px;
    min-width:158px;
    height:462px;
    /*margin-right:-4px;*/
}
.column-1 {
    width: 158px;
}
.column-2 {
    width:316px;
}
.tiles{
    border:1px solid black;
    background-color:#ac2a2a;
    position:relative;
    margin:2px;
    float:left;
}
.tiles:hover {
    box-shadow:0 0 2px 2px rgba(255, 255, 255, 0.34);
}
.img-of-tiles {
    width:100%;
    max-height:100%;
}
.full-img-tiles {
    height:100%;
}
.slide-tiles{
    width:784px;
    height:462px;
    top:6px;
}
.detail-info-tiles {
    width:820px;
    height:462px;
    background-color:snow;
    color:black;
}
.product-view-tiles {
    width:632px;
    height:462px;
}
.box-comment-tiles {
    width:468px;
    height:462px;
    color:black;
}
.contain-tiles {
    width:335px;
    height:462px;
}
.large-tiles{
    width:310px;
    height:306px;
}
.wide-tiles{
    width:310px;
    height:150px;
}
.medium-tiles{
    width:152px;
    height:150px;
}
.invi-tiles{
    background-color:transparent;
    border:0;
    position:relative;
    margin:2px;
    float:left;
}
.invi-tiles:hover {
    box-shadow:none;
}
.title-tiles {
    bottom:5px;
    position:absolute;
    font-size:17px;
    left:5px;
}
.tiles-hover {
    top:0;
    left:0;
    position:absolute;
    background:rgb(70, 203, 49);
    border:0;
    margin:0;
    padding:0;
    display:none;
    opacity:0.64;
}
.tiles-hover img {
    width:50px;
    height:50px;
    background-color:transparent;
    top:40%;
    position:absolute;
}
.detail-view {   
    left:0;
}
.add-cart {
    right:0;
}
/*----------------------------------- End style tiles -----------------------------------*/
#nav-bar {
    position:fixed;
    display:block;
    width:100%;
    height:120px;
    margin:0;
    padding:0;
    bottom:80%;
    z-index:999;
}
.nav-bar-left {
    top:10px;
    left:53px;
    position:relative;
    float:left;
}
.nav-bar-right {
    top:10px;
    right:35px;
    position:relative;
    float:right;
}
#menu {
    margin-top:10px;
    white-space:normal;
}
#menu li {
    display:inline-block;
    list-style:none;
    position:relative;
}
#menu span {
    padding:3px 5px;
    padding-right:34px;
    font-size:24px;
}
#menu span:hover {
    color:#ebebeb;
    text-shadow:0 0 2px 1px #ebebeb;
}
#menu ul {
    display:none;
    position:absolute;
    z-index:999;
    background:#fff;
    border:2px solid black;
    width:200px;
}
#menu ul li {
    width:100%;
}
#menu ul li span {
    color:black;
    display:block;
    text-shadow:none;
    font-size:18px;
    padding-left:20px;
}
#menu ul li span:hover {
    color:#fff;
    background:#67b6ea;
    text-shadow:none;
}
.icon-arrow {
    background:url("/Images/ImgPage/White_Arrow_Down_svg.png") no-repeat center;
    background-size:13px;
    padding-left:10px;
    margin-left:5px;
}
#text-h1 {
    font-size:30px;
}
#search-form {
    width:120px;
}
#search-form input {
    height:25px;
    width:inherit;
    vertical-align:top;
    font-size:15px;
    border:0;
    padding-left:5px;
}
input:focus {
    box-shadow:0 0 2px 2px rgba(255, 255, 255, 0.34);
}
#sign-in, #user-name  {
    display:inline-block;
    font-size:20px;
    cursor:pointer;    
    padding:20px 9px;
    position:relative;
}
.login-area:hover {
    background:rgba(251, 251, 251, 0.14);
}
.sign-form {
    z-index:999;
    background:#fff;
    width:260px;
    position:absolute;
    right:0;
    border:2px solid black;
    color:black;
    display:none;
    overflow:hidden;
}
.valid-login-message {
    font-size:13px;
    text-align:center;
    color:red;
    display:block;
    margin-top:5px;
}
.sign-form input {
    width:230px;
    display:block;
    padding:7px;
    margin:15px auto;
    font-size:15px;
}
#remember-check-1 {
   margin:1px 0;
   width:20px;
   float:left;
}
#remember-check-2 {
   margin:3px 0;
   width:20px;
   float:left;
}
#btt-submit-sign-in, #btt-register, #btt-forgot-pw, #btt-cart {
    border:0;
    width:100%;
    background:#fff;
    margin:6px auto;
    padding:7px 0;
}
#btt-submit-sign-in:hover, #btt-register:hover, #btt-forgot-pw:hover, #btt-cart:hover {
    background:rgba(176, 173, 173, 0.98);
    cursor:pointer;
}
.user-info-area:hover {
    background:rgba(251, 251, 251, 0.14);
}
.user-info-area:hover #icon-user, .user-info-area:hover #icon-shopping-cart, .login-area:hover #icon-user, .login-area:hover #icon-shopping-cart{
    border-color:black;
}
.icon-info {
    padding:12px 25px;
    border:3px solid;
    border-radius:100px;
    margin-left:5px;
    cursor:pointer;

}
#icon-shopping-cart {
    background:url("/Images/ImgPage/shopping_cart_icon.png") no-repeat center;
    background-size:contain;
}
.user-manager {
    position:absolute;
    z-index:999;
    background:#fff;
    width:270px;
    right:0;
    display:none;
    border:2px solid black;
}
.user-manager span {
    color:black;
    display:block;
    padding:10px 10px;
    margin:6px auto;
    font-size:19px;
}
.user-manager span:hover {
    background:rgba(176, 173, 173, 0.98);
}
.login-area, .user-info-area {
    position:relative;
    top:30px;
}
#color-picker {
    position:absolute;
    top:28px;
    display:none;
    z-index:999;
}
#colorpicker {
    background-color:rgba(0, 0, 0, 0.44);
    position:relative;
    top:-2px;
}
.color-value {
    padding:7px 0px;
    width:193px;
    display:none;
    border:1px solid;
    margin-top:-2px;
}
.color-value-selected {
    display:block;
}
#customize-theme-btt {
    background:url("/Images/ImgPage/spectrum_chart.jpg") no-repeat center;
    background-size:contain;
    cursor:pointer;
}
.panel-target-customize {
    background-color:rgba(0, 0, 0, 0.44);
}
#list-target-customize {
    font-size:16px;
    width:195px;
    padding:3px;
}
